<template>
  <div class="generalListContainer">
    <!-- 标题 -->
    <div class="titleListContent">
      <div class="titleLine"></div>
      <div class="titleName">各岗位综合考核得分与全司排名</div>
    </div>
    <!-- 表头 -->
    <div class="tableHeaderContent">
      <div class="listLine"></div>
      <div v-for="item in tableHeader" :key="item.id" class="tableHeader">
        <div @click="handleSortToggle(item)" :class="item.id === 1 && 'tableHeaderName'">{{ item.name }}</div>
        <div class="sortTble" v-if="item.sort">
          <div class="filterTbleItem">
            <svg-icon :icon="item.sortUp ? 'iconJianxu' : item.sortDown ? 'iconShengxu' : 'defalutPaixu'" class="sortIcon"></svg-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div>
      <div
        v-for="item in generalData.performanceInstitutionVO"
        :key="item.dimensionId"
        @click="handleItem(item)"
        class="listItem"
      >
        <div class="itemContent">
          <div class="dimensionName">{{ item.dimensionName }}</div>
          <div class="assessmentScore">{{ item.assessmentScore }}</div>
          <div class="averageSore">{{ item.averageSore }}</div>
          <div
            :class="[
              { sortRank: true },
              // todo first 拼写
              { rankFrist: item.rank === '1' },
              { rankSecond: item.rank === '2' },
              { rankThird: item.rank === '3' }
            ]"
          >
            {{ item.rank }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    generalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showPicker: false,
      tableHeader: [
        { id: 1, name: '岗位' },
        { id: 2, name: '得分', sort: true, sortUp: false, sortDown: false, code: 'assessmentScore' },
        { id: 3, name: '全司均值' },
        { id: 4, name: '全司排名', sort: true, sortUp: false, sortDown: false, code: 'rank' }
      ]
    }
  },
  components: {},
  mounted() {},
  methods: {
    handleSortToggle(item) {
      if(!item.code){
         return
      }
      /** 如果点击的是当前，操作当前。其余的置为false */
      this.tableHeader.map(v => {
        if (v.code === item.code) {
          if (!item.sortUp && !item.sortDown) {
            item.sortUp = !item.sortUp
          } else {
            item.sortUp = !item.sortUp
            item.sortDown = !item.sortDown
          }
        } else {
          v.sortUp = false
          v.sortDown = false
        }
      })
      const sort = item.sortUp ? 'DESC' : 'ASC'
      const sortField = item.code
      this.$emit('sortTableList', sort, sortField)
    },
    handleItem(item) {
      const { institutionValue } = this.generalData
      this.$router.push(`/performanceDetails?dimensionId=${item.dimensionId}&institutionValue=${institutionValue}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.generalListContainer {
  .titleListContent {
    display: flex;
    align-items: center;
    line-height: 22px;
    padding: 16px 0px 8px 11px;
    .titleLine {
      width: 4px;
      height: 15px;
      background: #0a82fa;
    }
    .titleName {
      font-size: 16px;
      padding-left: 6px;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .tableHeaderContent {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px 12px 20px;
    position: relative;
    .listLine{
      position: absolute;
      height: 1px;
      width: 295px;
      bottom: 0px;
      background-color: #484E5F;
    }
    .tableHeader {
      display: flex;
      align-items: center;
      line-height: 17px;
      font-weight: 400;
      font-size: 12px;
      padding-left: 18px;
      color: #a3a5ac;
      &:nth-child(2){
        padding-left: 0px;
      }
      .tableHeaderName {
        width: 86px;
      }
      .sortIcon{
         font-size: 16px;
      }
    }
  }
  .listItem {
    .itemContent {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px 12px 20px;
      font-size: 14px;
      .dimensionName {
        width: 92px;
        font-weight: 500;
        color: #e9e9ed;
        line-height: 20px;
      }
      .assessmentScore {
        padding-right: 24px;
      }
      .averageSore {
        padding-right: 30px;
      }
      .sortRank {
        width: 28px;
        height: 20px;
        font-size: 14px;
        margin: 0 8px;
        display: inline-block;
        background: linear-gradient(135deg, rgba(134, 142, 167, 0.14) 0%, rgba(98, 107, 135, 0.14) 100%);
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
      }
      .rankFrist {
        background: linear-gradient(135deg, rgba(255, 215, 131, 0.91) 0%, rgba(255, 185, 75, 0.43) 100%);
      }
      .rankSecond {
        background: linear-gradient(135deg, rgba(255, 144, 69, 0.84) 0%, rgba(255, 97, 50, 0.6) 100%);
      }
      .rankThird {
        background: linear-gradient(135deg, rgba(145, 182, 255, 0.51) 0%, rgba(121, 117, 255, 0.42) 100%);
      }
    }
  }
}
</style>
